<template>
  <div class="right-main">
    <div class="tob-bar">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统</el-breadcrumb-item>
        <el-breadcrumb-item>员工管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="mainContainer userListPage">
      <div class="table-serch-bar">
        <el-form ref="form" :inline="true" :model="form" size="medium">
          <el-form-item label="姓名">
            <el-input v-model="form.name" placeholder="请输入名字" clearable></el-input>
          </el-form-item>
          <RoleSelect :p_value.sync="form.roleIds" label-name="角色"></RoleSelect>
          <DeptSelect :p_value.sync="form.deptId" label-name="所属部门"></DeptSelect>
          <el-form-item>
            <el-button type="success" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="synUser">同步用户</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        class="my-table"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        :default-sort="{prop: 'date', order: 'descending'}"
        @selection-change="handleSelectionChange"
      >
        <el-table-column width="50" align="center" type="selection"></el-table-column>
        <el-table-column min-width="90" align="center" type="index" label="序号"></el-table-column>
        <el-table-column min-width="160" align="center" prop="name" label="姓名"></el-table-column>
        <el-table-column min-width="60" align="center" prop="sex" label="性别">
          <template slot-scope="scope">
            <span>{{scope.row.sex===0 ? '男' : '女'}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="200" align="center" prop="idCard" label="身份证号"></el-table-column>
        <el-table-column min-width="220" align="center" prop="email" label="邮箱"></el-table-column>
        <el-table-column min-width="130" align="center" prop="telephone" label="手机号码"></el-table-column>
        <el-table-column min-width="280" align="center" prop="roleName" label="角色"></el-table-column>
        <el-table-column min-width="120" align="center" prop="deptName" label="所属部门"></el-table-column>
        <el-table-column min-width="90" align="center" prop="jobPosition" label="岗位"></el-table-column>
        <el-table-column min-width="90" align="center" prop="parentName" label="上级"></el-table-column>
        <el-table-column min-width="90" align="center" prop="status" label="在职状态">
          <template slot-scope="scope">
            <span
              :class="scope.row.status === 1 ? 'text-danger' : 'text-dafult'"
              disable-transitions
            >{{scope.row.status===1 ? '离职' : '在职'}}</span>
          </template>
        </el-table-column>
        <el-table-column min-width="120" align="center" prop="entryDate" label="入职日期"></el-table-column>
        <!--<el-table-column align="center" prop="value11" label="离职日期"></el-table-column>        -->
      </el-table>
      <div class="table-tools clearfix">
        <div class="fl">
          <el-button type="default" icon="iconfont iconadd" size="medium" @click="add"> 添加人员</el-button>
          <el-button type="default" icon="iconfont iconuser1" size="medium" @click="role"> 权限分配</el-button>
          <el-button type="default" icon="iconfont iconview" size="medium" @click="view"> 查看</el-button>
          <el-button type="default" icon="iconfont iconedit" size="medium" @click="edit"> 编辑</el-button>
          <el-button type="default" icon="iconfont icondelet1" size="medium" @click="delet"> 删除</el-button>
        </div>
        <div class="pagination fr">
          <div class="block">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="pageInfo.page"
              :page-size="pageInfo.pageSize"
              layout="prev, pager, next, jumper"
              :total="pageInfo.total"
            ></el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Http from "../../libs/http.js";
import DeptSelect from "../../components/DeptSelect" ;
import RoleSelect from "../../components/RoleSelect" ;
import UserSelect from "../../components/UserSelect" ;
export default {
  name: "userList",
  components:{
    DeptSelect,
    RoleSelect,
    UserSelect
  },
  data() {
    return {
      selected:[],
      //搜索框
      pageInfo:{
        total:0,
        pageSize:10,
        page:1
      },
      form: {
        name: "",
        deptId: "",
        roleIds: [],
      },
      // 表格数据
      tableData: [

      ]

    };
  },
  created(){
    this.getList()
  },
  methods: {
    getList: function() {
      Http.api.post("user/search?page="+this.pageInfo.page+"&pageSize="+this.pageInfo.pageSize,this.form).then(res => {
          console.log(res);
          this.tableData = res.data.content;
          this.pageInfo.total=res.data.total;
      });
    },
    handleCurrentChange(val) {
      this.getList();
    },
    handleSelectionChange: function (val) {
      this.selected = val;
    },
    onSubmit() {
      this.getList();
    },
    synUser(){
      Http.api.get("user/synUser").then(res => {
         this.$message({
              type: "success",
              message: "数据异步同步中，请稍后查看"
            });
      });
    },
    // 删除提示
    delet() {
      this.$confirm("确定要删除该用户吗？", "提示", {
        confirmButtonText: "删除",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "custom-modal",
        iconClass: "no-icon",
        center: true
      })
        .then(() => {
          let ids = new Array();
          this.selected.forEach((e) => {
            ids.push(e.id)
          });
          Http.api.post("user/del",{ids:ids}).then((res)=>{
            this.$message({
              type: "success",
              message: "已删除"
            });
            this.selected.forEach((e) => {
              this.tableData.splice(this.tableData.indexOf(e),1)
            });
          })

        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 查看
    view() {
      if(this.selected.length != 1 ){
        this.$message.error('请选择一条数据查看');
        return ;
      }else{
        this.$router.push({path: "/system/viewUser",query:{id:this.selected[0].id}});
      }
    },
    //添加
    add() {
      this.$router.push({ path: "/system/addUser" });
    },
    //编辑
    edit() {
      if(this.selected.length != 1 ){
        this.$message.error('请选择一条数据编辑');
        return ;
      }else{
        this.$router.push({path: "/system/editUser",query:{id:this.selected[0].id}});
      }    },
    //权限分配
    role() {
      this.$router.push({path: "/system/userRole",query:{id:this.selected[0].id}});
    }
  }
};
</script>
